<template>
  <view class="banner">
      <!-- <cardCategory></cardCategory>
      <cardLevel></cardLevel>
      <cardStatus></cardStatus>
      <echart></echart>  -->

    <zhzc-serviceZone :name="'杨泽峰'" :isOldStyle="false" userState="未关联" ></zhzc-serviceZone>
    <zhzc-hotService :styles="styles" :isOldStyle="false" :matterList="matterList"></zhzc-hotService>
    <zhzc-cardThing :isOldStyle="false" :matterList="matterList"></zhzc-cardThing>
    <zhzc-policyGuarantee :isOldStyle="false" :matterList="matterList"></zhzc-policyGuarantee>
    <zhzc-shbz :isOldStyle="false" :matterList="matterList"></zhzc-shbz>
    <zhzc-travel :isOldStyle="false" :matterList="matterList"></zhzc-travel>
    <zhzc-businessThing :isOldStyle="false" :matterList="matterList"></zhzc-businessThing>
    <zhzc-facility :isOldStyle="false" :matterList="matterList"></zhzc-facility>
  </view>
</template> 

<script lang="ts" setup>
import { zhzcServiceZone, zhzcHotService, zhzcCardThing, zhzcBusinessThing,  zhzcPolicyGuarantee, zhzcTravel, zhzcFacility,zhzcShbz } from "../../../components/zhzc/components/index/provinceServe.js"
import {cardStatus,cardCategory,cardLevel,echart} from "../../../components/common/components/index/common.js"
import { reactive, ref } from 'vue';
const styles = '"margin-top":"-365upx"'


const matterList = ref([
    {
        "name": "残疾人证首次申领",
        "type": "1,5",
        "subject": "1",
        "icon": "ic-zj-sh-f",
        "bgcolor": "#b7d7f0",
        "bgimage": "ic-zj-ya",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=single&matterId=1114179846&sddtab=true"
    },
    {
        "name": "残疾人证变更",
        "type": "1",
        "subject": "1",
        "icon": "ic-zj-scsl",
        "bgcolor": null,
        "bgimage": null,
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=single&matterId=1112392203&sddtab=true"
    },
    {
        "name": "残疾人证迁移",
        "type": "1",
        "subject": "1",
        "icon": "ic-zj-snqy",
        "bgcolor": null,
        "bgimage": null,
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=single&matterId=1114184039&sddtab=true"
    },
    {
        "name": "残疾人证遗失补办",
        "type": "1",
        "subject": "1",
        "icon": "ic-zj-ysbb",
        "bgcolor": "#c68686",
        "bgimage": "ic-zj-dqr",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=single&matterId=1112832552&sddtab=true"
    },
    {
        "name": "残疾人证注销",
        "type": "1",
        "subject": "1",
        "icon": "ic-zj-cshx",
        "bgcolor": "#dd2727",
        "bgimage": "ic-zj-dqc",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=single&matterId=1112392128&sddtab=true"
    },
    {
        "name": "残疾人证残损换新",
        "type": "1",
        "subject": "1",
        "icon": "ic-zj-zjbg",
        "bgcolor": "#b05454",
        "bgimage": "ic-zj-dqr",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=single&matterId=1112902729&sddtab=true"
    },
    {
        "name": "困难生活补贴",
        "type": "5",
        "subject": "1",
        "icon": "ic-zj-xc",
        "bgcolor": "#59a18b",
        "bgimage": "ic-zj-dsh",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=10122981703807&sddtab=true"
    },
    {
        "name": "重度护理补贴",
        "type": "5",
        "subject": "1",
        "icon": "ic-zj-xc",
        "bgcolor": "#70a9cd",
        "bgimage": "ic-zj-dqr",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=10151451704002&sddtab=true"
    },
    {
        "name": "低保认定",
        "type": "5",
        "subject": "1",
        "icon": "ic-zj-xc",
        "bgcolor": "#273854",
        "bgimage": "ic-zj-dbj",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/notice?matterType=powerDirectory&matterId=101400501&syncUserType=true&sddtab=true"
    },
    {
        "name": "扶残助困一件事联办",
        "type": "5",
        "subject": "1",
        "icon": "ic-zj-dsh",
        "bgcolor": "#8c60c3",
        "bgimage": "ic-zj-dbj",
        "url": "https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2002276639/reserved/index.html?sddtab=true"
    },
    {
        "name": "困难残疾人生活补贴资格认定",
        "type": "7",
        "subject": "1",
        "icon": "ic-zj-ysbb",
        "bgcolor": "#caf2ef",
        "bgimage": "ic-zj-dbj",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=10137172027006&syncUserType=true&sddtab=true"
    },
    {
        "name": "重度残疾人护理补贴资格认定",
        "type": "7",
        "subject": "1",
        "icon": "ic-zj-ysbb",
        "bgcolor": "#b72a2a",
        "bgimage": "ic-zj-dbj",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=10138212026602&syncUserType=true&sddtab=true"
    },
    {
        "name": "残疾人大学生学费住宿费减免",
        "type": "7",
        "subject": "1",
        "icon": "ic-zj-ysbb",
        "bgcolor": "#de7c7c",
        "bgimage": "ic-zj-dqc",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=10117722026805&syncUserType=true&sddtab=true"
    },
    {
        "name": "听力残疾儿童人工耳蜗免费植入手术申请",
        "type": "7",
        "subject": "1",
        "icon": "ic-zj-ysbb",
        "bgcolor": "#c55e5e",
        "bgimage": "ic-zj-dbj",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=10117722026805&syncUserType=true&sddtab=true"
    },
    {
        "name": "病残儿鉴定",
        "type": "2",
        "subject": "1",
        "icon": "ic-zj-pc-f",
        "bgcolor": "#b6ddb9",
        "bgimage": "ic-zj-dsh",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=101300037&sddtab=true"
    },
    {
        "name": "残疾人低保边缘认定",
        "type": "2",
        "subject": "1",
        "icon": "ic-zj-zjzx",
        "bgcolor": "#b6e5b3",
        "bgimage": "ic-zj-dsh",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/notice?matterType=powerDirectory&matterId=101100250&syncUserType=true&sddtab=true"
    },
    {
        "name": "残疾人低保认定",
        "type": "2",
        "subject": "1",
        "icon": "ic-zj-ysbb",
        "bgcolor": "#9a95e4",
        "bgimage": "ic-zj-dqc",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/notice?matterType=powerDirectory&matterId=101400501&syncUserType=true&sddtab=true"
    },
    {
        "name": "特困残疾人供养",
        "type": "2",
        "subject": "1",
        "icon": "ic-zj-zjzx",
        "bgcolor": "#b7d3f0",
        "bgimage": "ic-zj-dsh",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/notice?matterType=powerDirectory&matterId=101400501&syncUserType=true&sddtab=true"
    },
    {
        "name": "注册登记",
        "type": "4",
        "subject": "1",
        "icon": "ic-zj-zjzx",
        "bgcolor": "#ffffff",
        "bgimage": "ic-zj-dqc",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/notice?matterType=powerDirectory&matterId=101101409&syncUserType=true&sddtab=true"
    },
    {
        "name": "燃油补贴",
        "type": "4",
        "subject": "1",
        "icon": "ic-zj-zjzx",
        "bgcolor": "#ffffff",
        "bgimage": "ic-zj-dqc",
        "url": "https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001833931/reserved/index.html?sddtab=true"
    },
    {
        "name": "无障碍出行",
        "type": "4",
        "subject": "1",
        "icon": "ic-zj-zjzx",
        "bgcolor": "#ffffff",
        "bgimage": "ic-zj-dsh",
        "url": "https://zjcl-ywpt.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/zlb-zhzc/zhzc-travel-icon-3.png"
    },
    {
        "name": "残疾人求职登记",
        "type": "3",
        "subject": "1",
        "icon": "ic-zj-scsl",
        "bgcolor": "#a64e4e",
        "bgimage": "ic-zj-dpdtz",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/notice?matterType=powerDirectory&matterId=1011801525&syncUserType=true&sddtab=true"
    },
    {
        "name": "残疾人失业登记",
        "type": "3",
        "subject": "1",
        "icon": "ic-zj-sh-f",
        "bgcolor": "#b2b4f0",
        "bgimage": "ic-zj-dbj",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=101100180&sddtab=true"
    },
    {
        "name": "残疾人职业培训补贴申领",
        "type": "3",
        "subject": "1",
        "icon": "ic-zj-zjzx",
        "bgcolor": "#e8cdfe",
        "bgimage": "ic-zj-dbj",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/notice?matterType=powerDirectory&matterId=1011801525&syncUserType=true&sddtab=true"
    },
    {
        "name": "创业带动就业补贴申领",
        "type": "3",
        "subject": "1",
        "icon": "ic-zj-sh-f",
        "bgcolor": "#eedef7",
        "bgimage": "ic-zj-dqr",
        "url": "https://recept.zjzwfw.gov.cn/app/accept/entry?matterType=powerDirectory&matterId=101100180&sddtab=true"
    },
    {
        "name": "康复评估",
        "type": "6",
        "subject": "1",
        "icon": "ic-zj-sh-f",
        "bgcolor": "#edbaba",
        "bgimage": "ic-zj-dbj",
        "url": "xxx"
    },
    {
        "name": "机构服务",
        "type": "6",
        "subject": "1",
        "icon": "ic-zj-sq-f",
        "bgcolor": "#e3cee3",
        "bgimage": "ic-zj-dpdtz",
        "url": "xxx"
    },
    {
        "name": "12385维权",
        "type": "6",
        "subject": "1",
        "icon": "ic-zj-zjzx",
        "bgcolor": "#ecc1c1",
        "bgimage": "ic-zj-dpdtz",
        "url": "xxx"
    },
    {
        "name": "云课堂",
        "type": "6",
        "subject": "1",
        "icon": "ic-zj-sq-f",
        "bgcolor": "#ccdde0",
        "bgimage": "ic-zj-dpdtz",
        "url": "xxx"
    }
])
</script>

<style lang="scss" scoped>
.banner {
  background: #F3F5F9;
  width: 100%;
  min-height: calc(100vh - 30upx);

  .notice {
    color: #999999;
    font-size: 24upx;
    margin: 60upx auto;
    width: 100%;
    text-align: center;
  }

  .notice-box {
    width: calc(100% - 60upx);
    height: auto;
    display: flex;
    justify-content: center;
    margin: 20upx auto;
  }

  .banner-box {
    width: calc(100% - 60upx);
    height: 286upx;
    margin: 0 auto 30upx auto;
    border-radius: 8px;
    background: linear-gradient(89.76deg, rgba(10, 167, 145, 1) 10.87%, rgba(10, 167, 145, 0.8) 97.21%);
    text-align: center;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.28);
    position: relative;

    .banner-float-image {
      position: absolute;
      right: 0;
      top: 68upx;
      width: 302upx;
      height: 210upx;
    }


    .banner-title {
      width: 446upx;
      height: 70upx;
      position: absolute;
      left: 30upx;
      top: 60upx;
    }

    .banner-title-fu {
      width: 280upx;
      height: 125upx;
      position: absolute;
      left: 15upx;
      top: 110upx;
    }
  }

  .zjsl-box,
  .shcz-box {
    margin-top: 30upx;

    .zjsl-content {
      width: calc(100% - 120upx);
      height: auto;
      overflow: hidden;
      border-radius: 16upx;
      background: $uni-bg-content-color;
      padding: 28upx 30upx 4upx 30upx;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;

      margin: 30upx auto;
      text-align: left;

      & .zjsl-content-item {
        width: 134upx;
        height: 128upx;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        margin-bottom: 24upx;
        position: relative;


        .circle {
          width: 45upx;
          height: 45upx;
          border-radius: 50%;
          background: #F9221E;
          color: #ffffff;
          position: absolute;
          top: -10upx;
          right: 10upx;
          font-size: 24upx;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .icon-box {
          width: 72upx;
          height: 72upx !important;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-repeat: no-repeat;

          image {
            width: 48upx;
            height: 48upx !important;
          }

        }

        text {
          color: #666666;
          font-size: 24upx;
          display: block;
          width: 100%;
          text-align: center;
        }
      }

      .zjsl-content-item:nth-child(4n+1),
      .zjsl-content-item:nth-child(4n+2),
      .zjsl-content-item:nth-child(4n+3) {
        margin-right: 30upx;
      }

    }

  }



}


.toast {
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 34rpx;
  text-align: center;
  padding: 10rpx 60rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 300upx;
  height: 80upx;
  line-height: 80upx;
  border-radius: 10upx;
  transition: all .3s linear;
}
</style>../../../components/zhzc-serve/components/index/provinceServe.js../../../components/zhzc/components/index/provinceServe.js